<template>
  <div class="pieTu">
    <div id="pieChart" />
    <div class="posRight">
      <el-dropdown class="posRight" trigger="click">
        <span class="spending">{{ timer }} <i class="el-icon-arrow-down el-icon--right" /></span>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <el-dropdown-item v-for="item in timerData" :key="item" @click.native="timeClick(item)">
            {{ item }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!--  收入 开支  -->
    <el-dropdown class="posRight posRight1" trigger="click" szie="mini">
      <span class="spending">
        {{ spending }}
        <i class="el-icon-arrow-down el-icon--right" />
      </span>
      <el-dropdown-menu slot="dropdown" class="user-dropdown">
        <el-dropdown-item
          v-for="item in allSele"
          :key="item.val"
          @click.native="piesele(item)"
        >
          {{ item.item }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import { PieChart } from 'echarts/charts'
import { LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import picker from '@/components/Search/picker'
echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
])
export default {
  mixins: [picker],
  data() {
    return {
      value1: [],
      allSele: [{ item: '收入', val: 1 }, { item: '开支', val: 2 }], // 收入开支
      legendData: [], // 右侧数据 [名字]
      seriesData: [], // 饼图数据
      marketData: [], // 获取到的全部数据
      pitemid: 1,
      spending: '收入',
      timer: '本月',
      timers: [],
      timerData: ['上月', '本月', '今年']
    }
  },

  mounted() {
    this.pieWaterData()
  },
  methods: {
    // 收入开支
    piesele(val) {
      this.pitemid = val.val
      this.spending = val.item
      this.pieWaterData()
    },
    // 时间日期
    timeClick(item) {
      this.timer = item
      if (item === '上月') {
        this.shangyue()
      } else if (item === '本月') {
        this.benyue()
      } else if (item === '今年') {
        this.jinnian()
      }
      this.pieWaterData()
    },
    pieWaterData() {
      this.seriesData = []
      this.legendData = []
      queryWateritemsAnalysis({
        sd: this.timers[0],
        ed: this.timers[1],
        pitemid: this.pitemid
      }).then(res => {
        res.data.forEach(res => {
          this.seriesData.push({
            name: res.pItemtype,
            value: res.pamount
          })
          this.legendData.push(res.pItemtype)
        })
        this.drawLine()
      })
    },
    // 模板
    drawLine() {
      const pieChart = echarts.init(document.getElementById('pieChart'))
      // 绘制图表
      pieChart.setOption({
        title: {
          text: '流水分析',
          y: '0'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          orient: 'horizontal',
          bottom: 5
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            width: 600,
            height: 600,
            left: 'center',
            top: 'middle',
            center: ['50%', '48%'],
            data: this.seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="scss">
.pieTu {
  width: 100%;
  position: relative;
  .posRight {
    width: 80px;
    position: absolute;
    top: 5px;
    right: 50px;
  }
  .posRight1 {
    top: 10px;
    right: 0;
  }
}
.spending {
  cursor: pointer;
  border: 1px solid #DDD;
  border-radius: 3px;
  padding: 4px 8px;
}
#pieChart {
  width: 100%;
  height: 510px
}
</style>
